<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorate="~{admin/adminJs}" xmlns:v-on="http://www.w3.org/1999/xhtml">

<body layout:fragment="content">

    <div class="easyui-layout" data-options="fit:true,border:false" style="height: 600px;">
        <div data-options="title:'&nbsp;&nbsp;一级菜单',region:'west'" style="width:250px;height: 600px;">
            <!--菜单树-->
            <div style="padding: 20px;">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="addRoot('')">新增</a>
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="editRoot()">修改</a>
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="deletedRoot()">删除</a>
            </div>
            <ul id="menuTree" style="padding: 0 15px 0 15px;">

            </ul>
        </div>
        <div data-options="region:'center',title:'&nbsp;&nbsp;二级菜单'">
            <div id="toolbar" >
                <div id="search" style="padding:15px">
                    <span>菜单名:</span>
                    <el-input v-model="name" placeholder="请输入内容" style="width: 150px;"></el-input>
                    <span>是否可见:</span>
                    <el-input v-model="isDisplay" placeholder="请输入内容" style="width: 150px;"></el-input>
                    <dict-select  :keys.sync="isDisplay" placeholder="请选择" @change-value="val=>{this.isDisplay=val}"><!--changeIsDisplay-->
                    </dict-select>
                    <a id="btn" href="#" v-on:click="query" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
                </div>

                <div id="operator" style="padding:0 0 15px 15px">
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" v-on:click="add('')">新增</a>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" v-on:click="edit()">修改</a>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" v-on:click="deleted()">删除</a>
                </div>
            </div>
            <!--列表-->
            <table id="menuTable" style="width:100%;" >

            </table>

        </div>
    </div>

    <script>

        var filter={value:''};
        initMenu(filter);
        function initMenu(filter) {
            filter.name='';
            filter.isDisplay='';
        }

        function closeDialog(isRefresh) {
            if(isRefresh){
                reload();
            }
            $('#editDialog').dialog("close");
        }

        function reload() {
            $('#menuTable').datagrid('reload',filter);

        }

        function reloadTree() {
            $('#menuTree').tree("reload");
        }

        var vm=  new Vue({
            el: '#toolbar',
            data:filter,
            methods: {
                query:function () {
                    reload();
                },
                add:function (id) {
                    if(filter.pid=="no"){
                        EasyuiUtils.alert("请选择一级菜单!");
                        return ;
                    }
                    EasyuiUtils.openWindows("editDialog",'新增',860,600,'/admin/system/menu/edit?id='+id+"&pid="+filter.pid+"&pidName="+filter.pidName);
                },
                edit:function () {
                    var row=EasyuiUtils.getSelected("#menuTable");
                    if(row){
                        this.add(row.id);
                    }
                },
                deleted:function () {
                    EasyuiUtils.confirmDelete("#menuTable",'/admin/system/menu/delete');
                },
                changeIsDisplay:function (val) {
                    filter.isDisplay=val;
                }
            }
        });


        filter.pid='no';
        $('#menuTable').datagrid({
            url:'/admin/system/menu/listData',
            queryParams:filter,
            columns:[
                [{field:'id',title:'id',align:'center',checkbox:true},
                    {field:'name',title:'菜单名',width:'20%',align:'center',sortable:"true"},
                    {field:'url',title:'链接',width:'30%',align:'center'},
                    {field:'isDisplay',title:'是否可见',width:'10%',align:'center',formatter:isDisplayView},
                    {field:'orderNo',title:'排序号',width:'10%',align:'center'},
                    {field:'description',title:'描述',width:'28%',align:'center'},
                    {field:'pid',title:'pid',width:'10%',align:'center',hidden:true}
            ]],
            striped:true,
            pagination:true,
            rownumbers:true,
            singleSelect:true,
            toolbar:'#toolbar'
        });
        function isDisplayView(value,row,index) {
            return value=='Y'?'显示':'隐藏';
        }


        $('#menuTree').tree({
            url:'/admin/system/menu/listRoot',
            formatter:function(node){
                return node.name;
            },
            onClick: function(node){
                initMenu(filter);
                filter.pid=node.id;
                filter.pidName=node.name;
                reload();
            }
        });

        function addRoot(id) {
            EasyuiUtils.openWindows("editDialog",'新增',860,600,'/admin/system/menu/edit?id='+id+"&pid=0");
        }
        function editRoot() {
            var row=$('#menuTree').tree('getSelected');
            if(row){
                addRoot(row.id);
            }else{
                EasyuiUtils.alert("请选中一个选项！");
            }
        }
        function deletedRoot() {
            var url='/admin/system/menu/delete';
            var row= $('#menuTree').tree('getSelected');
            if(row){
                EasyuiUtils.confirm("确定删除?",function () {
                    $.post(url+"?id="+row.id,{},function (data) {
                        EasyuiUtils.alert("保存成功！",function () {
                            reloadTree();
                        });
                    });
                });
            }else{
                EasyuiUtils.alert("请选中一个选项！");
            }
        }
    </script>
</body>

</html>